<template>
  <div class="home">
    <h1 class="title">Home</h1>
    <el-button type="primary" @click="handleClick1">点击发送get请求</el-button>
    <el-button type="primary" @click="handleClick2">点击发送post请求</el-button>
  </div>
</template>

<script>
export default {
  name: 'home',
  data() {
    return {

    }
  },
  computed: {

  },
  watch: {

  },
  created() {

  },
  mounted() {

  },
  methods: {
    //  请求的第二个参数一般不需要，只当你需要使用try/catch捕获请求错误时，可以将catch设置为true，这样在请求失败时会抛出错误，你可以在catch中处理后续逻辑
    async handleClick1() {
      try {
        await this.$api.requestTest1({ id: 1 }, { catch: true })
      } catch (error) {
        console.log(error);
      }
    },
    async handleClick2() {
      try {
        await this.$api.requestTest2({ id: 1 }, { catch: true })
      } catch (error) {
        console.log(error);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  padding: 20px;
  text-align: center;

  h1 {
    color: red;
  }
}
</style>